<template>
  <div class="box fc">
    <el-icon
      :size="18"
      color="#008EFC"
      @click="expand"
    >
      <component :is="icon" />
    </el-icon>
  </div>
</template>
<script lang='ts' setup>
import { commonStore } from '@/store'
const store = commonStore()
const icon = ref('CaretLeft')
let isShow = false
const expand = () => {
  // icon.value = isShow ? 'expand' : 'fold'
  icon.value = isShow ? 'CaretLeft' : 'CaretRight'
  isShow = !isShow
  store.changeNavStatus(isShow)
}
</script>
<style lang='scss' scoped>
.box {
  width: 16px;
  height: 50px;
  border-radius: 0 16px 16px 0;
  background: #0f0f0f;
}
</style>
